<template>
  <div class="all">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心 </el-breadcrumb-item>
      <el-breadcrumb-item>密码修改</el-breadcrumb-item>
    </el-breadcrumb>

    <br />

    <div id="edit_pwd">
      <el-form :model="pwdForm" :rules="rules" ref="pwdForm" label-width="100px" class="demo-ruleForm">
        <i class="iconfont icon-r-lock" style="font-size: 32px"><b style="font-size: 28px">密码修改</b></i>
        <br />
        <br />
        <br />

        <el-form-item label="账号">
          <el-input :readonly="true" v-model="pwdForm.empAccount"></el-input>
        </el-form-item>
        <el-form-item label="旧密码" prop="empPwd">
          <el-input type="password" v-validate="'required'" v-model="pwdForm.empPwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newEmpPwd">
          <el-input type="password" v-validate="'required'" v-model="pwdForm.newEmpPwd"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitUpdateMessage()" style="font-size: 18px">确定</el-button>
          <el-button @click="resetForm('pwdForm')" style="font-size: 18px">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script>
import axios from 'axios';
export default {
  data() {
    return {
      empId: "",
      cusId: "",
      username: "",
      password: "",
      pwdForm: {
        empId: "",
        empAccount: "",
        empPwd: "",
        newEmpPwd: "",
      },
      rules: {
        newEmpPwd: [
          {
            required: true,
            message: "新密码不能为空",
            trigger: "blur",
          },
        ],
        empPwd: [
          {
            required: true,
            message: "旧密码不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    init() {
      this.empId = localStorage.getItem('empId');
      this.cusId = localStorage.getItem('cusId');
      this.username = localStorage.getItem('username') || "";
      this.password = localStorage.getItem('password') || "";
    },
    getMaindata() {
      let url = "http://localhost:8080/employee";
      axios.get(url, { params: { empId: this.empId } })
        .then((response) => {
          console.log(response.data);
          this.userform = response.data.data.rows;
          this.pwdForm.empAccount = this.username;
          this.pwdForm.empId = this.empId;
        })
        .catch((error) => {
          console.error('Error in getMaindata request', error);
        });
    },
    submitUpdateMessage() {
      if (this.pwdForm.empPwd != this.password) {
        alert("旧密码不正确，请重新输入！");
        return;
      }
      if (this.pwdForm.newEmpPwd == "") {
        alert("新密码不能为空，请重新输入！");
        return;
      }
      this.pwdForm.empPwd = this.pwdForm.newEmpPwd;
      this.updateData();
      this.$message({
        type: "success",
        message: "修改成功，请重新登录!",
      });
      this.Logout();
      this.$router.push('/login');
    },
    checkid() {
      if (this.empId == "" || this.empId == null)
        this.$router.push('/login');
    },
    updateData() {
      const url = "http://localhost:8080/employee";
      axios.put(url, this.pwdForm
      ).then((response) => {
        console.log(response.data);
      })
        .catch((error) => {
          console.error('Error in updateData request', error);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    Logout() {
      localStorage.removeItem('empId');
      localStorage.removeItem('cusId');
      localStorage.removeItem('password');
    },
  },

  created() {
    this.init();
    this.checkid();
    this.getMaindata();
  },

};
</script>


<style>
#edit_pwd {
  width: 50%;
  margin: 20px auto;
  background-color: #ffffff;
  padding: 20px;
}

.all {
  line-height: 30px;
}
</style>